<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
  <title>菜单展示 - 肯德基风格</title>
  <style>
    body {
      margin: 0;
      font-family: 'Helvetica Neue', sans-serif;
      background-color: #fff;
      color: #333;
    }

    .header {
      background-color: #d9232e;
      color: white;
      text-align: center;
      padding: 1rem;
      font-size: 1.5rem;
    }

    .category-bar {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1rem;
      padding: 1rem 2rem;
      background-color: #f9f9f9;
      border-bottom: 1px solid #eee;
    }

    .category-button {
      padding: 0.5rem 1rem;
      border: 1px solid #d9232e;
      background-color: white;
      color: #d9232e;
      border-radius: 20px;
      cursor: pointer;
      font-size: 0.95rem;
      transition: all 0.2s ease;
    }

    .category-button:hover {
      background-color: #d9232e;
      color: white;
    }

    .dish-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      padding: 2rem;
    }

    .dish-card {
      border: 1px solid #eee;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      background-color: #fff;
      transition: transform 0.2s ease;
    }

    .dish-card:hover {
      transform: translateY(-5px);
    }

    .dish-image {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }

    .dish-info {
      padding: 1rem;
      text-align: center;
    }

    .dish-name {
      font-size: 1.1rem;
      margin: 0.5rem 0;
      color: #222;
    }

    .dish-price {
      color: #d9232e;
      font-weight: bold;
    }
  </style>
</head>
<body>
<header class="header">
  <h1>菜单精选</h1>
</header>
<div id="app">
  <!-- 分类选择按钮 -->
  <nav class="category-bar">
    <button
            class="category-button"
            @click="getAllDishes"
            :class="{ active: currentCategory === '全部' }"
    >
      全部
    </button>

    <span v-for="(type, index) in typeList" :key="index">
      <button
              class="category-button"
              @click="getByType(type.typeId)"
              :class="{ active: currentCategory === type.typeName }"
      >
        {{ type.typeName }}
      </button>
    </span>
  </nav>

  <!-- 搜索框 -->
  <div style="text-align: center; margin-top: 1rem;">
    <input
            type="text"
            v-model="searchKeyword"
            placeholder="请输入菜品名称进行搜索"
            style="padding: 0.5rem 1rem; width: 250px; border-radius: 20px; border: 1px solid #ccc; outline: none;"
    />
    <button
            @click="searchDish(searchKeyword)"
            class="category-button"
            style="margin-left: 0.5rem;"
    >
      搜索
    </button>
  </div>

  <!-- 菜品展示 -->
  <ul class="dish-container">
    <li v-for="(dish,index) in dishList">
      <a :href="'dish_detail.html?id=' + dish.dishId">
        <div class="dish-card">
          <img :src="dish.dishImg" alt="香辣鸡腿堡" class="dish-image" />
          <div class="dish-info">
            <div class="dish-name">{{ dish.dishName }}</div>
            <div class="dish-price">¥{{ dish.dishPrice }}</div>
          </div>
        </div>
      </a>
    </li>
  </ul>
</div>

<script>
  const vm = new Vue({
    el: "#app",
    data: {
      typeList: [],
      dishList: [],
      currentCategory: '全部',
      searchKeyword: ''
    },
    mounted() {
      this.getAllTypes();
      this.getAllDishes();
    },
    methods: {
      // 获得所有类别
      getAllTypes() {
        axios.get("dishType")
                .then(response => {
                  this.typeList = response.data.data;
                })
                .catch(error => {
                  console.log(error);
                });
      },
      // 获得所有的菜品
      getAllDishes() {
        this.currentCategory = '全部';
        axios.get("dish")
                .then(response => {
                  this.dishList = response.data.data;
                })
                .catch(error => {
                  console.log(error);
                });
      },
      // 根据类别获得菜品数据
      getByType(typeId) {
        const url = "dish/type/" + typeId;
        axios.get(url)
                .then(response => {
                  this.dishList = response.data.data;
                  const selected = this.typeList.find(t => t.typeId === typeId);
                  this.currentCategory = selected ? selected.typeName : '';
                })
                .catch(error => {
                  console.log(error);
                });
      },

      // 搜索菜品
      searchDish() {
        const keyword = this.searchKeyword.trim(); //删去空格
        if (!keyword) {
          alert("请输入搜索关键词");
          return;
        }
        const url = "dish/name/" + encodeURIComponent(keyword);
        axios.get(url)
                .then(response => {
                  this.dishList = response.data.data;
                  this.currentCategory = '';
                })
                .catch(error => {
                  console.error(error);
                });
      }
    }
  });
</script>
</body>
</html>
